<template>
  <div>
    <a-collapse  v-if="processList.length > 0" v-model="activeKey" :expand-icon-position="expandIconPosition" @change="collapseChange" accordion>
      <a-collapse-panel v-for="(item, index) in processList" :key="String(index)">
        <template slot="header">
          {{ item.name }}
          <a-tag v-if="item.endtime" color="#f50"> 已审批 </a-tag>
          <a-tag v-else color="#2db7f5"> 审批中 </a-tag>
        </template>
        <WF_MYTASKUNDORECORD
          ref="Wf_MyTaskUndoRecordRef"
          :autoCreated="true"
          width="100%"
          :processinstanceid="item.processinstanceid"
        />
      </a-collapse-panel>
    </a-collapse>
    <a-empty v-else />
  </div>
</template>

<script>
import { querySonProcessByInstid } from '@/api/worktasks/wt_personal.js'
export default {
  data() {
    return {
      processList: [],
      activeKey: [],
      expandIconPosition: 'right',
    }
  },
  created() {},
  methods: {
    // 折叠项切换
    collapseChange(val) {
      console.log('collapseChange', val)
    },
    // 父组件调用初始化数据
    async f_init(fainstid) {
      this.processList = []
      this.activeKey = ['0']
      const { data } = await querySonProcessByInstid(fainstid)
      console.log('子流程记录', data)
      if (data && data.length > 0) {
        this.processList = data
      }
    },
  },
  components: {
    WF_MYTASKUNDORECORD: () => import('@/views/workflow/Wf_MyTaskUndoRecord.vue'),
  },
}
</script>

<style lang="scss" scoped>
</style>
